
<template>
  <div class="single-btn-contain">
    <slot></slot>
    <!-- @mouseout="tooltipClse" -->
    <div class="result-tooltip" @mouseover="tooltipClick"  @mouseout="tooltipClse" @click="tooltipClick">
      <span class="fa fa-info-circle item-tip-icon"></span>
      <div class="tooltip-text">
        <div class="triangle"></div>
        <div class="tooltip-content">{{ tooltip }}</div>
      </div>
    </div>
  </div>
</template>

<script>
// 自定义tooltip
export default {
  name: "customTooltip",
  props: {
    tooltip: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  created() {
    let _this = this;
  },
  mounted() {
    let _this = this;
  },
  components: {},
  methods: {
    tooltipClick(e) {
      e.stopPropagation(); // 阻止冒泡
      const tooltip = e.currentTarget.getElementsByClassName("tooltip-text"); // 选中点击的图标需要展示的tooltip
      const allToolTip = document.getElementsByClassName("tooltip-text");
      const icon = e.currentTarget.getElementsByClassName("item-tip-icon"); // 选中点击的图标
      const content = tooltip[0].getElementsByClassName("tooltip-content"); // tooltip内容
      const triangle = tooltip[0].getElementsByClassName('triangle') 
      for (const item of allToolTip) {
        item.style.setProperty("visibility", "hidden"); // 循环让所有tooltip不展示
      }
      if (
        tooltip[0].style.visibility === "hidden" ||
        tooltip[0].style.visibility === ""
      ) {
        tooltip[0].style.setProperty("visibility", "visible");
      } else {
        tooltip[0].style.setProperty("visibility", "hidden");
        return;
      }
      if (content[0].offsetWidth < 200) {
        // 如果内容宽度小于200px，即情况1、3
        if (content[0].offsetWidth / 2 > icon[0].getBoundingClientRect().x) {
          // 若内容宽度 / 2 大于小icon到最左边的距离，小三角不能居中，只能设置margin，并且margin值与当前内容宽度有关
          triangle[0].style.setProperty('margin-left', content[0].offsetWidth / 2 - 16 + 'px')
          tooltip[0].style.setProperty("margin-left", "10px");
        } else {
          // 情况3时，tooltip小三角可以居中展示，分别设置小三角与text的位置
          triangle[0].style.setProperty('left', '50%')
          triangle[0].style.setProperty('margin-left', '-3px')
          tooltip[0].style.setProperty("margin-left", 0);
          tooltip[0].style.setProperty("left", "50%");
        }
      }
    },
    tooltipClse(e) {
      e.preventDefault()
      const tooltip = e.currentTarget.getElementsByClassName('tooltip-text')
      tooltip[0].style.setProperty('visibility', 'hidden') // 循环让所有tooltip不展示        
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.single-btn-contain {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.result-tooltip .triangle {
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.8);
  margin-left: 78px;
  position: absolute;
  bottom: 100%;
  border-width: 5px;
  border-style: solid;
}

.result-tooltip {
  display: flex;
  align-items: center;
  position: relative;
}

.result-tooltip .item-tip-icon:hover {
  cursor: pointer;
}

.result-tooltip .tooltip-text {
  width: max-content;
  visibility: hidden;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 6px;
  padding: 12px 8px 12px 12px;
  position: absolute;
  z-index: 1;
  bottom: -15px;
  margin-left: 110px;
  transform: translate(-50%, 100%);
  display: flex;
}
.tooltip-close {
  display: inline-block;
  width: 32px;
  height: 32px;
  padding-left: 16px;
}
.tooltip-content {
  max-width: 400px;
  text-align: left !important;
}

</style>